<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane label="待审核"
        ><el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
        >
          <el-form-item label="视频名称" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入视频名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <el-select
              v-model="queryParams.categoryId"
              placeholder="视频分类"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in categoryArr"
                :key="item.categoryId"
                :label="item.name"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="视频状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="videoList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="视频名称"
            prop="title"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="上传者"
            prop="createBy"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column
            label="分类"
            prop="categoryMsg"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <!-- <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column> -->
          <el-table-column
            label="视频描述"
            prop="description"
            :show-overflow-tooltip="true"
            width="190"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-tickets"
                @click="handleCheck(scope.row)"
                v-hasPermi="['system:role:edit']"
                >开始审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      /></el-tab-pane>
      <el-tab-pane label="已审核">
        <el-form
          :model="queryCheckedParams"
          ref="queryCheckedParams"
          size="small"
          :inline="true"
          v-show="showSearch"
        >
          <el-form-item label="视频名称" prop="title">
            <el-input
              v-model="queryCheckedParams.title"
              placeholder="请输入视频名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <el-select
              v-model="queryCheckedParams.categoryId"
              placeholder="视频分类"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in categoryArr"
                :key="item.categoryId"
                :label="item.name"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="审核结果" prop="status">
            <el-select
              v-model="queryCheckedParams.auditState"
              placeholder="审核结果"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleCheckedQuery"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetCheckedQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="videoList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="视频名称"
            prop="title"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="上传者"
            prop="createBy"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column
            label="分类"
            prop="categoryMsg"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <!-- <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column> -->
          <el-table-column
            label="视频描述"
            prop="description"
            :show-overflow-tooltip="true"
            width="190"
          />
          <el-table-column
            label="审核结果"
            prop="auditState"
            align="center"
            :show-overflow-tooltip="true"
            width="190"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.auditState === '1' ? 'success' : 'danger'"
                >{{ scope.row.auditState === "1" ? "通过" : "驳回" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-tickets"
                @click="handleDetail(scope.row)"
                v-hasPermi="['system:role:edit']"
                >视频详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 审核视频dialog -->
    <el-dialog
      :title="dialogStatus.title"
      :visible.sync="dialogStatus.visible"
      width="500px"
      append-to-body
      center
      @close="closeDialog"
      :before-close="beforeCloseDialog"
    >
      <el-form
        ref="form"
        :model="dialogData"
        :rules="rules"
        label-width="100px"
        v-loading="dialogLoading"
      >
        <el-form-item label="视频标题" prop="title">
          <el-input
            :disabled="dialogStatus.isDisabled"
            v-model="dialogData.title"
            placeholder="请输入视频标题"
          />
        </el-form-item>
        <el-form-item label="视频上传" v-if="dialogStatus.isAdd">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            :on-change="beforeUpload"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <!-- <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload"
                >上传到服务器</el-button
              > -->
            <div slot="tip" class="el-upload__tip">
              请上传一个视频文件，若要更换请先移出已选择视频！
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="资源视频" v-else>
          <div
            :id="'player-' + dialogData.videoId"
            style="width: 300px; height: 200px"
          ></div>
        </el-form-item>
        <!-- <el-form-item label="视频状态" prop="type">
            <el-input-number
              v-model="dialogData.type"
              controls-position="right"
              :min="0"
            />
          </el-form-item> -->
        <el-form-item label="视频状态" prop="status">
          <el-select
            :disabled="dialogStatus.isDisabled"
            v-model="dialogData.status"
            placeholder="视频状态"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="视频分类" prop="categoryId">
          <el-select
            :disabled="dialogStatus.isDisabled"
            v-model="dialogData.categoryId"
            placeholder="视频分类"
            clearable
            style="width: 240px"
            @change="handleCategoryChange"
          >
            <el-option
              v-for="item in categoryArr"
              :key="item.categoryId"
              :label="item.name"
              :value="item.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="视频标签" prop="tagIds">
          <el-select
            :disabled="dialogStatus.isDisabled"
            v-model="dialogData.tagIds"
            placeholder="请先选择分类"
            multiple
            clearable
            style="width: 240px"
            @change="handleTabChange"
          >
            <el-option
              v-for="item in tagArr"
              :key="item.tagId"
              :label="item.content"
              :value="item.tagId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            :disabled="dialogStatus.isDisabled"
            v-model="dialogData.description"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="审核意见" v-if="!dialogStatus.isDetail">
          <el-input
            v-model="checkQuery.auditResult"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!dialogStatus.isDetail">
        <el-button type="primary" @click="handlePass">通 过</el-button>
        <el-button @click="handleCancel">驳 回</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="dialogStatus.visible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getVideoList as getVideoListApi,
  getPlayAuth as getPlayAuthApi,
  getVideoDetail as getVideoDetailApi,
  updateVideo as updateVideoApi,
  deleteVideo as deleteVideoApi,
} from "../../../api/video/videoList";
import {
  getCategoryList as getCategoryListApi,
  getCategoryTab as getCategoryTabApi,
} from "../../../api/video/videoList";
import { pass as passApi } from "../../../api/video/check";
import { Notification, MessageBox, Message, Loading } from "element-ui";

import to from "await-to-js";
export default {
  name: "videoList",
  data() {
    return {
      queryParams: {
        title: "",
        status: "",
        type: "",
        auditState: "0",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryCheckedParams: {
        title: "",
        status: "",
        type: "",
        auditState: "1",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryCategoryParams: {
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryTagParams: {
        categoryId: "",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      // getAuthParams: {
      //   fileName: "",
      //   title: "",
      // },
      // 多选
      multiple: true,
      // 单选状态
      single: true,
      ids: [],
      // 是否展示search
      showSearch: true,
      // 加载状态
      loading: false,
      dialogLoading: false,
      // 视频列表
      videoList: [],
      // 列表总数
      total: 0,
      // 将要上传的文件
      file: "",
      fileList: [],
      // 视频上传进度
      percentage: 0,
      // 视频播放器
      videoPlayer: "",
      initDialogStatus: {
        isDetail: false,
        isCheck: false,
        isUpdate: false,
        isAdd: false,
        visible: false,
        isUploading: false,
        title: "",
      },
      dialogStatus: {
        isDetail: false,
        isUpdate: false,
        isAdd: false,
        visible: false,
        isUploading: false,
        isDisabled: false,
        title: "",
      },
      queryCategoryParams: {
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      checkQuery: {
        id: "",
        isPass: false,
        // 理由
        auditResult: "",
      },
      dialogData: {
        title: "",
        description: "",
        type: "",
        fileName: "",
        status: "0",
      },
      typeArr: [
        {
          label: "option1",
          value: "1",
        },
        {
          label: "option2",
          value: "2",
        },
        {
          label: "option3",
          value: "3",
        },
      ],
      statusArr: [
        {
          label: "未审核",
          value: "0",
        },

        {
          label: "通过",
          value: "1",
        },
        {
          label: "驳回",
          value: "2",
        },
      ],
      categoryArr: [],
      rules: {
        title: [
          { required: true, message: "视频标题不能为空！", trigger: "blur" },
        ],
        status: [
          { required: true, message: "状态为必选项！", trigger: "blur" },
        ],
        auditResult: [
          { required: true, message: "审核理由为必填项！", trigger: "blur" },
        ],
      },
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },
  methods: {
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetCheckedQuery() {
      this.resetForm("queryCheckedParams");
      this.handleCheckedQuery();
    },
    // 搜索
    handleQuery() {
      this.getList();
    },
    handleCheckedQuery() {
      this.getCheckedList();
    },
    // 获取列表
    async getList() {
      this.loading = true;
      const [err, res] = await to(getVideoListApi(this.queryParams));
      if (!err) {
        console.log(res);
        this.videoList = res.rows;
        this.videoList.forEach((item) => {
          if (item.categoryVo) {
            item.categoryMsg = item.categoryVo.name;
          }
        });
        this.total = Number(res.total);
        this.loading = false;
      } else {
        Message.error("获取视频列表失败");
        this.loading = false;
      }
    },
    async getCheckedList() {
      this.loading = true;
      const [err, res] = await to(getVideoListApi(this.queryCheckedParams));
      if (!err) {
        console.log(res);
        this.videoList = res.rows;
        this.videoList.forEach((item) => {
          if (item.categoryVo) {
            item.categoryMsg = item.categoryVo.name;
          }
        });
        this.total = Number(res.total);
        this.loading = false;
      } else {
        Message.error("获取视频列表失败");
        this.loading = false;
      }
    },
    // 获取分类列表
    async getCategoryList() {
      const [err, res] = await to(getCategoryListApi(this.queryCategoryParams));
      if (!err) {
        console.log(res);
        this.categoryArr = res.rows;
      }
    },
    // 获取资源详情
    async getVideoDetail(id) {
      const [err, res] = await to(getVideoDetailApi(id));
      if (!err) {
        console.log(res);
        this.dialogData = res.data;
        // 获取当前分类的标签列表
        if (res.data.categoryId) {
          this.queryTagParams.categoryId = res.data.categoryId;
          console.log(this.queryTagParams);
          const [err2, res2] = await to(getCategoryTabApi(this.queryTagParams));
          if (!err2) {
            console.log(res2);
            this.tagArr = res2.rows;
          }
          this.dialogData.tagIds = res.data.tagList.map((item) => {
            return item.tagId;
          });
          console.log(this.dialogData.tagIds);
        }
      }
    },
    async handleCheck(row) {
      this.dialogLoading = true;
      this.dialogStatus.visible = true;
      this.dialogStatus.isCheck = true;
      this.dialogStatus.isDisabled = true;
      this.dialogStatus.title = "视频详情";
      this.checkQuery.id = row.videoId;
      // 获取视频详情
      await this.getVideoDetail(row.videoId);
      // 获取播放凭证
      const [err, res] = await to(getPlayAuthApi(row.videoId));
      if (!err) {
        console.log(res);
        this.videoPlayer = new Aliplayer({
          id: "player-" + row.videoId,
          width: "100%",
          vid: res.data.vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: res.data.playAuth, //必选参数。音视频播放凭证。
          autoplay: true,
          preload: true,
        });
        this.dialogLoading = false;
      } else {
        Message.error("获取播放凭证失败！");
        this.dialogLoading = false;
      }
    },
    // 点击视频详情按钮
    async handleDetail(row) {
      this.dialogLoading = true;
      this.dialogStatus.visible = true;
      this.dialogStatus.isDetail = true;
      this.dialogStatus.title = "视频详情";
      this.checkQuery.id = row.videoId;
      // 获取视频详情
      await this.getVideoDetail(row.videoId);
      // 获取播放凭证
      const [err, res] = await to(getPlayAuthApi(row.videoId));
      if (!err) {
        console.log(res);
        this.videoPlayer = new Aliplayer({
          id: "player-" + row.videoId,
          width: "100%",
          vid: res.data.vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: res.data.playAuth, //必选参数。音视频播放凭证。
          autoplay: true,
          preload: true,
        });
        this.dialogLoading = false;
      } else {
        Message.error("获取播放凭证失败！");
        this.dialogLoading = false;
      }
    },
    // 通过按钮
    handlePass() {
      this.$refs["form"].validate(async (vilid) => {
        if (vilid) {
          console.log(this.checkQuery);
          this.checkQuery.isPass = true;
          const [err, res] = await to(passApi(this.checkQuery));
          if (!err) {
            Message.success("审核成功");
            this.dialogStatus.visible = false;
            this.getList();
          } else {
            Message.error("审核失败");
          }
        }
      });
    },
    // 拒绝按钮
    handleCancel() {
      this.$refs["form"].validate(async (vilid) => {
        if (vilid) {
          this.checkQuery.isPass = false;
          const [err, res] = await to(passApi(this.checkQuery));
          if (!err) {
            console.log(res);
            Message.success("审核成功");
            this.dialogStatus.visible = false;
            this.getList();
          } else {
            Message.error("审核失败");
          }
        }
      });
    },
    // 关闭dialog之前
    beforeCloseDialog(done) {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
        done();
      });
    },
    // 关闭dialog
    closeDialog() {
      this.loading = false;
      this.dialogLoading = false;
      this.fileList = [];
      this.dialogStatus = Object.assign({}, this.initDialogStatus);
      this.dialogData = {
        title: "",
        description: "",
        type: "",
        fileName: "",
        status: "0",
      };
      // 清空播放器
      if (this.videoPlayer != "") {
        this.videoPlayer.dispose();
      }
      console.log(this.dialogStatus);
    },
    tabClick(tab) {
      console.log(tab.index);
      if (tab.index === "0") {
        // 待审核
        this.getList();
      } else {
        this.getCheckedList();
      }
    },
    // 获取分类列表
    async getCategoryList() {
      const [err, res] = await to(getCategoryListApi(this.queryCategoryParams));
      if (!err) {
        console.log(res);
        this.categoryArr = res.rows;
      }
    },
    // 分类选择变化
    async handleCategoryChange(value) {
      console.log(value);
      this.tagArr = [];
      this.dialogData.tagIds = [];
      this.queryTagParams.categoryId = value;
      const [err, res] = await to(getCategoryTabApi(this.queryTagParams));
      if (!err) {
        console.log(res);
        this.tagArr = res.rows;
      }
    },
    handleTabChange(value) {
      this.dialogData.tagIds = value;
      console.log(value, this.dialogData.tagIds);
    },
  },
  created() {
    this.getList();
    this.getCategoryList();
  },
};
</script>
